{extend name="../../base/view/common/base" /}
<!-- 主体 -->
{block name="body"}
<style>
    .layui-card-header {
        position: relative;
    }
    .layuiadmin-card-list {
        padding: 15px;
    }
    .layuiadmin-card-list p.layuiadmin-big-font {
        font-size: 36px;
        color: #666;
        line-height: 36px;
        padding: 5px 0 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;
    }
    .layuiadmin-badge {
        top: 50%;
        margin-top: -9px;
        color: #01AAED;
    }
    .layuiadmin-badge, .layuiadmin-btn-group, .layuiadmin-span-color {
        position: absolute;
        right: 15px;
    }
</style>
<script src="{__JS__}/ECharts/echarts.js"></script>
<div>
    <!-- 内容主体区域 -->
    <div style="padding: 20px; background-color: #F2F2F2;overflow:hidden;">
        <div class="layui-row layui-col-space15">

            <form class="layui-form layui-col-md12">
                <div class="layui-col-md2">
                    <input type="text" name="time1" readonly lay-filter="khcardTime"  id="time1" class="layui-input" placeholder="时间范围">
                </div>
                <div class="layui-col-md2">
                    <select name="khid" lay-filter="khid" id="khid" lay-search class="layui-select select" >
                        <option value="">全部客户</option>
                        {volist name='khList' id='cardKh'}
                        <option value="{$cardKh.id}">{$cardKh.name}</option>
                        {/volist}
                    </select>
                </div>
            </form>
            <div class="layui-col-md12">

                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            销售金额(万元)

                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p class="layuiadmin-big-font" id="xsje">0</p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            销售对账金额(万元)

                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p class="layuiadmin-big-font" id="dzje">0</p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            已回金额(万元)

                        </div>
                        <div class="layui-card-body layuiadmin-card-list">

                            <p class="layuiadmin-big-font" id="yhje">0</p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            未回金额(万元)
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p class="layuiadmin-big-font" id="whje">0</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <form  class="layui-form ">
                            <div class="layui-col-md3">
                                <select name="khLineType" id="khLineType" lay-filter="khLineType" class=" layui-select">
                                    <option value="1">年统计</option>
                                    <option value="2">月统计</option>
                                </select>
                            </div>

                        <div class="layui-col-md2" id="khTimeBan">
                            <input type="text" name="ku_time" id="ku_time" class="layui-input" placeholder="时间范围">
                            <input type="text" name="ku_time" id="ku_time1" style="display: none" class="layui-input" placeholder="时间范围">
                        </div>
                            <div class="layui-col-md3">
                                <select name="ku_zheNme" lay-search id="khLineName" lay-filter="khLineName" class="layui-select" >
                                    <option value="">全部客户</option>
                                    {volist name='khList' id='lineKh'}
                                    <option value="{$lineKh.id}">{$lineKh.name}</option>
                                    {/volist}
                                </select>
                            </div>

                        </form>
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space15">
                            <div id="khtjt" style="height: 500px"></div>
                        </div>
                    </div>
                </div>
            </div>

<!--end 客户面板-->
            <div class="layui-col-md12">
                <form class="layui-form">
                <div class="layui-col-md2">
                    <input type="text" name="time2" readonly id="time2" class="layui-input" placeholder="时间范围">
                </div>
                <div class="layui-col-md2">
                    <select name="gysid" id="gysid" lay-filter='gysid' class="layui-select select">
                        <option value="">全部供应商</option>
                        {volist name='gysList' id='cardGys'}
                        <option value="{$cardGys.id}">{$cardGys.name}</option>
                        {/volist}
                    </select>
                </div>
                </form>
            </div>
            <div class="layui-col-md12">

                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            采购金额(万元)

                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p class="layuiadmin-big-font" id="cgje">0</p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header" >
                            采购对账金额(万元)

                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p class="layuiadmin-big-font" id="cgdz">0</p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            已付金额(万元)

                        </div>
                        <div class="layui-card-body layuiadmin-card-list">

                            <p class="layuiadmin-big-font" id="yfje">0</p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            未付金额(万元)
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p class="layuiadmin-big-font" id="wfje">0</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <div class="layui-card-header">
                            <form class="layui-form">
                                <div class="layui-col-md3">
                            <select name="" id="gysLineType" lay-filter="gysLineType" class=" layui-select">
                                <option value="1">年统计</option>
                                <option value="2">月统计</option>
                            </select>
                                </div>
                            <div class="layui-col-md2">
                                <input type="text" name="gys_time" id="gys_time" lay-filter="gys_time" class="layui-input" placeholder="时间范围">
                                <input type="text" name="gys_time" id="gys_time1" style="display: none" lay-filter="gys_time1" class="layui-input" placeholder="时间范围">
                            </div>
                                <div class="layui-col-md3">
                            <select name="gys_zheNme" lay-search lay-filter="gysLineName" class="layui-select" id="gys_zheNme">
                                <option value="">全部供应商</option>
                                {volist name='gysList' id='lineGys'}
                                <option value="{$lineGys.id}">{$lineGys.name}</option>
                                {/volist}
                            </select>
                                </div>
                            </form>
                        </div>

                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space15">
                            <div id="gystjt" style="height: 500px"></div>
                        </div>
                    </div>
                </div>
            </div>

<!--            end 供应商面板-->
        </div>

    </div>
</div>
</div>
{/block}
{block name="script"}
<script>
    function gouguInit() {
        var laydate = layui.laydate

        laydate.render({
            elem: '#time1',
            range: '~',
            done:function (val) {
                kuCard()
            }

        });
        laydate.render({
            elem: '#time2',
            range: '~',
            done:function (val) {
                gysCard();
            }
        });
        laydate.render({
            elem: '#ku_time',
            range: '~',
            type:'year',
            done:function (val) {
                kehuTjt()
            }

        });
        laydate.render({
            elem: '#ku_time1',
            range: '~',
            type:'month',
            done:function (val) {
                kehuTjt()
            }

        });
        laydate.render({
            elem: '#gys_time',
            range: '~',
            type:'year',
            done:function (val) {
                gystjt()
            }

        });
        laydate.render({
            elem: '#gys_time1',
            range: '~',
            type:'month',
            done:function (val) {
                gystjt()
            }

        });
       layui.use('form',function () {
           var form =layui.form;
           form.on('select(khid)', function(data){
              kuCard()
               // 在这里编写当选项变更时需要执行的代码
           });
           form.on('select(gysid)', function(data){
               gysCard()
               // 在这里编写当选项变更时需要执行的代码
           });
           form.on('select(khLineType)', function(data){

               if (data.value==1){
                   $("#ku_time").css('display','')
                   $("#ku_time1").css('display','none')
               }else {
                   $("#ku_time").css('display','none')
                   $("#ku_time1").css('display','')
               }
               kehuTjt()
               // 在这里编写当选项变更时需要执行的代码
           });
           form.on('select(khLineName)', function(data){
               kehuTjt()
               // 在这里编写当选项变更时需要执行的代码
           });
           form.on('select(gysLineType)', function(data){

               if (data.value==1){
                   $("#gys_time").css('display','')
                   $("#gys_time1").css('display','none')
               }else {
                   $("#gys_time").css('display','none')
                   $("#gys_time1").css('display','')
               }
               gystjt()
               // 在这里编写当选项变更时需要执行的代码
           });
           form.on('select(gysLineName)', function(data){
               gystjt()
               // 在这里编写当选项变更时需要执行的代码
           });
       })
        kuCard();
        gysCard();
        kehuTjt();
        gystjt()

    }

    function kuCard() {
        let time=$('#time1').val();
        let kh=$('#khid').val();
        let param={
            time:time,
            khId:kh
        };
        $.ajax({
            url:"{:url('Api/getKhCard')}",
            type:'post',
            data:param,
            success:function (res) {
                let resData=res.data;
                $("#xsje").text(resData.xsje);
                $("#dzje").text(resData.dzje);
                $("#yhje").text(resData.yhje);
                $("#whje").text(resData.whje);
            },
            error(e){
                layer.msg('网络错误,请稍后再试')
            }
        })
    }
    function gysCard() {
        let time=$('#time2').val();
        let kh=$('#gysid').val();
        let param={
            time:time,
            khId:kh
        };
        $.ajax({
            url:"{:url('Api/getGysCard')}",
            type:'post',
            data:param,
            success:function (res) {
                let resData=res.data;
                $("#cgje").text(resData.cgje);
                $("#cgdz").text(resData.cgdz);
                $("#yfje").text(resData.yfje);
                $("#wfje").text(resData.wfje);
            },
            error(e){
                layer.msg('网络错误,请稍后再试')
            }
        })
    }
    function kehuTjt() {
        let lineType=$('#khLineType').val();
        let lineTime=$('#ku_time').val();
        let lineTime1=$('#ku_time1').val();
        let lineName=$('#khLineName').val();
        let param={
            lineType:lineType,
            lineName:lineName,
            lineTime:lineType==1?lineTime:lineTime1
        };
        var chartDom = document.getElementById('khtjt');
        var myChart = echarts.init(chartDom);
        var option;
        myChart.showLoading()
        $.ajax({
            url:"{:url('Api/getKhLine')}",
            type:'post',
            data:param,
            success:function (res) {
                let resData=res.data;
                option = {
                    xAxis: {
                        type: 'category',
                        data: resData.time,
                        name:'时间'
                    },
                    yAxis: {
                        type: 'value',
                        name:'金额(万元)'
                    },
                    series: [
                        {
                            data: resData.data,
                            type: 'line',

                        }
                    ]
                };
                option && myChart.setOption(option);
                setTimeout(function () {
                    myChart.hideLoading()
                },2000)
            },
            error(){
                layer.msg('网络错误')
            },
        })



    }
    function gystjt() {

        let lineType=$('#gysLineType').val();
        let lineTime=$('#gys_time').val();
        let lineTime1=$('#gys_time1').val();
        let lineName=$('#gys_zheNme').val();
        let param={
            lineType:lineType,
            lineName:lineName,
            lineTime:lineType==1?lineTime:lineTime1
        };
        var chartDom = document.getElementById('gystjt');
        var myChart = echarts.init(chartDom);
        var option;
        myChart.showLoading()

        $.ajax({
            url:"{:url('Api/getGysLine')}",
            type:'post',
            data:param,
            success:function (res) {
               let resData=res.data;
                option = {
                    xAxis: {
                        name:"时间",
                        type: 'category',
                        data: resData.time
                    },
                    yAxis: {
                        type: 'value',
                        name:'金额(万元)'
                    },
                    series: [
                        {
                            data: resData.data,
                            type: 'line'
                        }
                    ]
                };

                option && myChart.setOption(option);
                setTimeout(function () {
                    myChart.hideLoading()
                },2000)
            },
            error(){
                layer.msg('网络错误')
            }
        })

    }
</script>
{/block}

